<template>
    <Card dis-hover :bordered="false">
            <Tabs
                v-model="currentTab"
                name="TutorDoctor"
                :animated="false"
                @on-click="askData"
            >
                <TabPane
                    label="预到"
                    name="plan"
                    tab="TutorDoctor"
                ></TabPane>
                <TabPane
                    label="已到"
                    name="complete"
                    tab="TutorDoctor"
                ></TabPane>
            </Tabs>
            <plan v-show="guide" ref="plan"/>
            <complete v-show="!guide" ref="complete"/>
    </Card>
</template>

<script>
import plan from "@/pages/guide/plan";
import complete from "@/pages/guide/complete";
export default {
    components: { plan,complete },
    name: "guide",
    data() {
        return {
            currentTab: 'plan',
            guide: true
        };
    },
    /* 函数方法集合 */
    methods: {
        /* @函数功能: 初始化 */
        initial() {
            this.askData('plan');
        },
        /* @函数功能: 请求数据 */
        askData(e) {
            this.guide = e ==='plan'
            if (this.guide){
                this.$refs.plan.initials()
            } else {
                this.$refs.complete.initials()
            }
        },
    },
    mounted() {
        this.initial();
    },
};
</script>
